<template>
    <el-container>
  <el-header>个人中心</el-header>
  <el-container>
    
    <el-aside width="200px" >
       <div  id="uu" style="border-radius:50%;border: 1px solid black;width: 200px;height: 200px;">
        <el-image @click="dj" :src="img+user.ImgPath" style="border:1px solid black;border-radius: 50%;">
    </el-image>
       </div>
    </el-aside>
    <el-main style="margin-top: 10px;">
     
      <el-dialog append-to-body title="编辑信息" :visible.sync="dialogFormVisible">
      <zhgai :xian.sync="dialogFormVisible" :shuju="gaiForm"  @refresh="cha"></zhgai>
    </el-dialog>
     <el-dialog append-to-body title="密码" :visible.sync="dialogFormVisible1" >
      <mgai :xian.sync="dialogFormVisible1" ></mgai>
    </el-dialog> 
    
    
    <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      
            <el-form-item label="姓名" prop="UserName" >
                <el-input v-model="ruleForm.UserName"  ></el-input>
            </el-form-item>
            
            <el-form-item label="性别" prop="Sex">
              <el-input v-model="ruleForm.Sex"></el-input>
            </el-form-item>

            <el-form-item label="出生日期" required>
              <el-input v-model="ruleForm.Birthday" ></el-input>
            </el-form-item>

            <el-form-item label="手机号码" prop="Phone">
                <el-input v-model="ruleForm.Phone" ></el-input>
            </el-form-item>
            
                       
           
            
        </el-form> -->
        <el-descriptions class="margin-top" :column="3" :size="size" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="jiay">修改详细信息</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ ruleForm.UserName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ ruleForm.Phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              性别
            </template>
            {{ ruleForm.Sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              出生日期
            </template>
            <el-tag size="small">{{ ruleForm.Birthday }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              所在身份
            </template>
            <el-tag size="medium" type="success">{{ ruleForm.RoleName }}</el-tag>

          </el-descriptions-item>
          <template slot="extra">
            <el-button type="warning" size="small" @click="jiay1">修改密码</el-button>
          </template>
        </el-descriptions>

      </el-main>
    <el-dialog title="上传" :visible.sync="dialogImgVisible">
      <el-upload
  class="avatar-uploader"
  action="http://localhost:49998/api/Files"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button @click="dian" >修改</el-button>
</el-dialog>

    </el-container>


  </el-container>

</template>


<script>

import zhgai from '@/geren/zhgai.vue'
import mgai from '@/geren/mgai.vue'
import url from '@/plugins/base'

import { mapState } from 'vuex'
export default {
  name: 'personage',
  data() {
    return {
      dialogImgVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      imageUrl: '',
      img: '',
      zz: {
        UserId: 0,
        ImgID: 0,
        path: ''
      },
      ruleForm: {
        UserId: 0,
        UserName: "",
        Sex: "",
        Birthday: "",
        Phone: "",
        RoleName: ""
      },
      size: '',
      gaiForm: {

      }
    }
  }
  ,

  created() {
    this.img = url.imgUrl;
    this.cha();

  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    cha() {

      this.axios({
        method: 'get',
        url: 'User/' + this.user.UserId,
        params: {},
      }).then(res => {
        console.log(res)
        this.ruleForm = res.data
        console.log(this.ruleForm)
        this.ruleForm.UserId = this.user.UserId
      }).catch(error => {
        console.log('error: ', error);
      })
    },

    dj() {
      console.log(this.img)
      this.dialogImgVisible = true
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message.success('图片上传成功!');
      this.zz.ImgID = res.data.imgID
      this.zz.path = res.data.path
      console.log(res.data)
      console.log(this.zz.UserId);

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';


      const isLtMB = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!');
      }
      if (!isLtMB) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return (isJPG || isPNG) && isLtMB;
    },
    dian() {
      this.zz.UserId = this.user.UserId
      console.log(this.zz)
      this.axios({
        method: 'PUT',
        url: 'Images',
        data: this.zz
      }).then(res => {
        this.$message({
          type: 'success',
          message: "修改成功"
        })
        this.dialogImgVisible = false;
        this.user.ImgPath = this.zz.path
      }).catch(err => {

      })

    },
    jiay() {

      this.gaiForm = JSON.parse(JSON.stringify(this.ruleForm))
      this.dialogFormVisible = true

    },
    jiay1() {
      this.dialogFormVisible1 = true

    }
  }, components: { zhgai, mgai }




}





</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>